<template>
	<div>
		
		<el-row :gutter="20">
		  <el-col :span="2" :offset="6">密码</el-col>
		  <el-col :span="6" ><el-input v-model="user.uspass" show-password></el-input></el-col>
		</el-row>
		<el-row :gutter="20" >
		  <el-col :span="2" :offset="6">确认密码</el-col>
		  <el-col :span="6" ><el-input v-model="depass" show-password></el-input></el-col>
		</el-row>
		<div>头像：
		   <el-upload ref="image"
		     class="avatar-uploader"
		     action="http://localhost:8088/testupload/upload"
		     :show-file-list="false"
		     :on-success="handleAvatarSuccess"
			 :on-change="changeImage"
		     :before-upload="beforeAvatarUpload"
			 :auto-upload="false">
		     <img v-if="imageUrl" :src="imageUrl" class="avatar">
		     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		   </el-upload>
		</div>
		<div>
			  <el-button type="success" @click="submit">提交</el-button>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
			  depass:"",
	        imageUrl: '',
			user:{
				usname:"",
				url:"",
				uspass:"",
				usid:""
			},
			changeType:false //没有图
	      };
	    },
	    methods: {
		  changeImage(){
			  console.log("改变")
			 this.changeType=true;//代表上传文件
		  },
		  uploaderr(){
			  console.log("errr")
		  },
		  submit(){
			  if(this.user.uspass==this.depass){
				 if(this.changeType){
				 				  //提交图
				 				   this.$refs.image.submit();
				 }else{
				 				  this.tijiao();
				 } 
			  }else{
				  alert("两次密码必须相同");
				  this.depass="";
				  this.user.uspass="";
			  }
			  
		  },
	      handleAvatarSuccess(res, file) {
	         console.log(res);
			 
			  this.user.url=res;
			  this.tijiao();
	      },
		  tijiao(){
			  this.user.usid=localStorage.getItem("usid");
			  this.$axios.post("/testupload/zhengshi",this.user)
			  .then(function(param){
			  				  console.log(param)
			  })
			  .catch(function(err){
			  				  console.log(err)
			  })
		  } ,
	      beforeAvatarUpload(file) {
	        const isJPG = file.type === 'image/jpeg';
	        const isLt2M = file.size / 1024 / 1024 < 2;
	
	        if (!isJPG) {
	          this.$message.error('上传头像图片只能是 JPG 格式!');
	        }
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 2MB!');
	        }
	        return isJPG && isLt2M;
	      }
	    }
	  }
</script>

<style>
	avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	  .el-upload{
		  border: 1px solid black;
	  }
	  .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    .el-col {
	      border-radius: 4px;
	    }
	    .bg-purple-dark {
	      background: #99a9bf;
	    }
	    .bg-purple {
	      background: #d3dce6;
	    }
	    .bg-purple-light {
	      background: #e5e9f2;
	    }
	    .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
</style>
